<template>
  <div v-if="data">
    <div class="center">
      <div class="cainter_sm">
        <div class="page_main">
          <span>首页 > 我要租房</span>
        </div>
      </div>
      <!-- 条件查询 -->
      <div class="search">
        <div class="cainter_sm">
          <div class="rent_title">
            <span>条件找房</span>
          </div>
          <!-- 筛选 -->
          <div class="filter_board">
            <!-- 搜索框 -->
            <div class="search_box">
              <input
                class="search_house"
                type="search"
                placeholder="请输入区域、商圈或小区名"
                id="search_input"
                v-model="search.kw"
                @keyup.13="getData"
              />
              <button class="search_btn" @click="getData">搜索</button>
            </div>
            <!--筛选条件 -->
            <div class="filter_tags">
              <!-- 区域 -->
              <div class="filter_row">
                <span>区域:</span>
                <div class="filter_tag_box" >
                  <a
                    href="#"
                    v-for="(item, index) in position"
                    :key="index"
                    :class="{ active: item.massages == search.position }"
                    @click="getPosition"
                    :data-massage="item.massages"
                    >{{ item.names }}</a
                  >
                  <!-- 区域 data-positon -->
                </div>
              </div>
              <!-- 点击对应区域显示该地详细地名 data-positionL-->
              <div class="filter-sub" v-if="search.position">
                <a
                  class="active"
                  href="#"
                  v-for="(item, index) in positionL"
                  :key="index"
                  :class="{ active: item.names == search.positionL }"
                  @click="getPositionL"
                  :data-massage="item.names"
                  >{{ item.names }}</a
                >
              </div>
              <!-- 租金 -->
              <div class="filter_row">
                <span>租金:</span>
                <div class="filter_tag_box">
                  <a href="#" @click="getPrice" class="active" data-massage=""
                    >全部</a
                  >
                  <a href="#" @click="getPrice" data-massage="500">500-700</a>
                  <a href="#" @click="getPrice" data-massage="700">700-1000</a>
                  <a href="#" @click="getPrice" data-massage="1000"
                    >1000-1500</a
                  >
                  <a href="#" @click="getPrice" data-massage="1500"
                    >1500-2000</a
                  >
                  <a href="#" @click="getPrice" data-massage="2000">2000以上</a>
                </div>
              </div>
              <!--户型 data-type -->
              <div class="filter_row">
                <span>户型:</span>
                <div class="filter_tag_box">
                  <a href="#" @click="getType" class="active" data-massage=""
                    >全部</a
                  >
                  <a href="#" @click="getType" data-massage="danjian"
                    >普通单间</a
                  >
                  <a href="#" @click="getType" data-massage="zhuwo"
                    >主卧带独卫</a
                  >
                  <a href="#" @click="getType" data-massage="biaojian"
                    >标间小套一</a
                  >
                  <a href="#" @click="getType" data-massage="zhengzu">整租</a>
                </div>
              </div>
              <!-- 入住 data-time -->
              <div class="filter_row">
                <span>入住:</span>
                <div class="filter_tag_box">
                  <a href="#" @click="getTime" class="active" data-massage=""
                    >全部</a
                  >
                  <a href="#" @click="getTime" data-massage="now">可立即入住</a>
                  <a href="#" @click="getTime" data-massage="week"
                    >一周内可入住</a
                  >
                  <a href="#" @click="getTime" data-massage="month"
                    >一月内可入住</a
                  >
                </div>
              </div>
              <!-- 室友data-friend -->
              <div class="filter_row">
                <span>室友:</span>
                <div class="filter_tag_box">
                  <a href="#" @click="getFriend" class="active" data-massage=""
                    >无所谓</a
                  >
                  <a href="#" @click="getFriend" data-massage="woman"
                    >全是妹子</a
                  >
                  <a href="#" @click="getFriend" data-massage="man">全是汉子</a>
                  <a href="#" @click="getFriend" data-massage="love"
                    >爱情公寓</a
                  >
                </div>
              </div>
              <!-- 配置 -->
              <div class="filter_row">
                <span>配置:</span>
                <div class="filter_tag_box">
                  <a href="#" @click="getToilet" data-massage="false">
                    <i class="fake-check"></i>
                    独立卫生间</a
                  >
                  <a href="#" @click="getBalcony" data-massage="false">
                    <i class="fake-check"></i>带阳台</a
                  >
                  <a href="#" @click="getWindow" data-massage="false">
                    <i class="fake-check"></i>带飘窗</a
                  >
                  <a href="#" @click="getTwo" data-massage="false">
                    <i class="fake-check"></i>可住两人</a
                  >
                </div>
              </div>
              <!-- 权属核验 data-isCheck-->
              <div class="filter_row">
                <span>权属核验:</span>
                <div class="filter_tag_box">
                  <a href="#" @click="getCheck" class="active" data-massage=""
                    >全部</a
                  >
                  <a href="#" @click="getCheck" data-massage="true">已核验</a>
                  <a href="#" @click="getCheck" data-massage="false">未核验</a>
                </div>
              </div>
              <!-- 已有筛选条件 -->
              <div class="filter_row">
                <span>筛选:</span>
                <div class="filter-tag-box">
                  <span
                    class="choosed-tag"
                    v-for="(item, index) in search"
                    :key="index"
                    v-show="item"
                  >
                    <span>
                      {{ item }}
                      <a href="#" @click="cancel(index)">x</a>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 展示部分 -->
      <div class="cainter_sm">
        <div class="gallery_wrap">
          <div class="tab_resource">
            <!-- 当显示为当前页面时current显示 -->
            <a href="#">信用直租</a>
            <a href="#" class="current">品牌公寓</a>
            <a href="#">所有房源</a>
          </div>
          <!--活动栏 只有当前页面为品牌公寓时才显示 -->
          <div class="tab_resource">
            <a href="#" class="current">热门推荐</a>
            <a href="#">秒杀专区</a>
            <a href="#">整租房源</a>
            <a href="#">全部</a>
          </div>
          <!-- 内容部分 -->
          <ul class="gallery">
            <li class="gallery_item" v-for="item in data" :key="item.eid">
              <span class="top_tags">
                <img src="../assets/images/brand-house-tag.png" alt="" />
                <img src="../assets/images/heyan.png" alt="" />
                <span class="pop">经政府平台核属核验</span>
              </span>
              <!-- 展示图片部分 -->
              <div class="item_img">
                <a href="#" target="_black">
                  <img
                    src="../assets/images/f1a41840-5b19-4cd6-aea0-dfab6700a463.jpg"
                    alt=""
                    style="display: inline-block"
                  />
                </a>
              </div>
              <!-- 文字描述部分 -->
              <div class="item_desc">
                <span class="item_tag"></span>
                <!-- 鼠标移入类型按钮后 显示的说明 -->
                <div class="item_text">
                  为优客统一标准化装修，多属房龄较短的电梯公寓，在裸房基础上完成精装全配。
                </div>
                <a
                  href="#"
                  target="_black"
                  title="丨地铁1号线 极地海洋世界 华阳客运站 万安镇 "
                  class="item_tit"
                  >{{ item.detailed }}</a
                >
              </div>
              <!-- 价格 与位置部分 -->
              <div class="item_info">
                <div class="item_loc">
                  <i></i>
                  <span class="sprites icon_ioc"> 中丝园</span>
                </div>
                <div class="item_price">
                  <span>
                    <sub>￥</sub>
                    {{ item.rent }}
                  </span>
                  元/月
                </div>
              </div>
            </li>
          </ul>
          <div class="no_search" v-show="data.length == 0">
            <img src="../assets/images/nosearch-small.png" alt="" />
            <span>艾玛呀， 抢光啦！换个搜索词试试~</span>
          </div>
        </div>
      </div>
      <!-- 目录条部分 和 底部管家推荐 -->
      <div class="cainter_sm">
        <!-- 目录条 -->
        <div class="pagenation">
          <a href="#">首页</a>
          <a href="#">上一页</a>
          <a href="#">1</a>
          <a href="#" class="cur">2</a>
          <a href="#">下一页</a>
          <a href="#">尾页</a>
        </div>

        <h2 class="reco-tit">管家推荐</h2>
        <!-- 管家推荐 -->
        <div class="reco-wrap">
          <ul class="recommend">
            <li>
              <a href="#">
                <img
                  src="../assets/images/f1a41840-5b19-4cd6-aea0-dfab6700a463.jpg"
                  alt=""
                />
              </a>
              <p class="desc">
                <a href="#">【高新区】复地金融岛</a>
              </p>

              <p class="price">
                <sub>￥</sub>
                <b>1200</b>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChoose: 0,
      data: null,
      // 筛选条件
      search: {
        kw: "", //搜索框内容
        position: "", //区位
        positionL: "", //详细位置
        price: "", //租金区间
        type: "", //房子类型
        times: "", //入住时间
        friend: "", //室友
        toilet: "", //是否有独卫
        balcony: "", //是否有阳台
        window: "", //是否有窗户
        two: "", //可住两人？
        check: "", //是否检验
      },
      // 区位
      position: [],
      //具体区域
      positionL: [],
    };
  },
  // 开始时，初始化，获取所有房源信息
  mounted() {
    this.axios.get("http://localhost:3000/room").then((res) => {
      // this.data = JSON.parse(res.data.results);
      this.data = JSON.parse(res.data.result);
    });
    // 显示所有的位置信息
    this.axios.get("http://localhost:3000/position").then((res) => {
      this.position = JSON.parse(res.data.results);
    });
  },
  methods: {
    cancel(index) {
      this.search[index] = "";
      this.getData();
    },

    //获取点击的内容
    // 获取区位
    getPosition(e) {
      let pon = e.target.getAttribute("data-massage");
      this.search.position = pon;
      // 获取详细区位
      this.axios.get(`http://localhost:3000/position/${pon}`).then((res) => {
        this.positionL = JSON.parse(res.data.results);
        console.log(this.positionL);
      });
      this.getData();
    },
    //详细区位
    getPositionL(e) {
      this.search.positionL = e.target.getAttribute("data-massage");
      this.getData();
    },
    //租金
    getPrice(e) {
      this.search.price = e.target.getAttribute("data-massage");
      this.getData();
    },
    //类型
    getType(e) {
      this.search.type = e.target.getAttribute("data-massage");
      this.getData();
    },
    //入住时间
    getTime(e) {
      this.search.times = e.target.getAttribute("data-massage");
      this.getData();
    },
    //室友
    getFriend(e) {
      this.search.friend = e.target.getAttribute("data-massage");
      this.getData();
    },
    //是否有独卫
    getToilet(e) {
      this.search.toliet = e.target.getAttribute("data-massage");
      this.getData();
    },
    //是否有阳台
    getBalcony(e) {
      this.search.balcony = e.target.getAttribute("data-massage");
      this.getData();
    },
    //是否有窗户
    getWindow(e) {
      this.search.window = e.target.getAttribute("data-massage");
      this.getData();
    },
    //是否可住两人
    getTwo(e) {
      this.search.two = e.target.getAttribute("data-massage");
      this.getData();
    },
    //是否检验
    getCheck(e) {
      this.search.check = e.target.getAttribute("data-massage");
      this.getData();
    },

    //获取的内容
    getData() {
      let sql = JSON.stringify(this.search);

      let url = `http://localhost:3000/room/pg_1/${sql}`;
      console.log(url);
      // 查询获取到符合条件的房子的编号eid
      this.axios.get(url).then((res) => {
        console.log(res.data.result);
        this.data = res.data.result;
        console.log("查询结果");
        console.log("=============================");
        console.log(this.data);
      });
    },
  },
};
</script>

<style src="../assets/css/Rent.css"></style>
